<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- Meta, title, CSS, favicons, etc. -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Gentelella Alela! | </title>

	<!-- Bootstrap -->
	<link href="/resa/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Font Awesome -->
	<link href="/resa/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<!-- NProgress -->
	<link href="/resa/vendors/nprogress/nprogress.css" rel="stylesheet">
	<!-- iCheck -->
	<link href="/resa/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
	<link rel="stylesheet" href="/resa/css/contextMenu.css" />
	<!-- Custom Theme Style -->
	<link href="../build/css/custom.min.css" rel="stylesheet">
	<!-- PNotify -->
	<link href="/resa/vendors/pnotify/dist/pnotify.css" rel="stylesheet">
	<link href="/resa/vendors/pnotify/dist/pnotify.buttons.css" rel="stylesheet">
	<link href="/resa/vendors/pnotify/dist/pnotify.nonblock.css" rel="stylesheet">



	<style>
		tr{
			cursor: pointer;
		}
		::-webkit-scrollbar {/*滚动条*/
			width:5px;
		}
		::-webkit-scrollbar-track {/*滚动槽*/
			-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
			border-radius:10px;
		}
		::-webkit-scrollbar-thumb {/*滚动条滑块*/
			border-radius:10px;
			background:rgba(0,0,0,0.1);
			-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
		}
		.success{
			background-color:rgba(34,215,187,.3);
			color:#878787;
			padding: 5px 15px;
			border-radius: 3px;
			font-size: 14px;

		}
		th{
			padding-left: 10px;
		}


		.modeladdress{
			position: absolute;
			top: 0px;
			left: 12px;
			width:220px;
			height: 220px;
		}

		.modal-backdrop {
			filter: alpha(opacity=0)!important;
			opacity: 0!important;
		}
		.yanfa{
			color: #1FD6BB;
		}
		.task{
			color: #64BF62;
		}
		.quexian{
			color:#F95A55
		}
	</style>
</head>

<body class="nav-md" style="background: #F0F0F0">
<!--<div class="container body">-->
<div class="main_container">


	<!-- page content -->
	<div class="right_col" role="main">
		<div class="">
			<!--<div class="page-title">
             <div class="title_left">
                <h3><small>Project Progress list</small></h3>
              </div>

              <div class="title_right">
                <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                  </div>
                </div>
              </div>
            </div>-->

			<div class="clearfix"></div>

			<div class="row">
				<div class="col-md-12">

					<div class="x_title" style="border: 0px;padding: initial;">
						<!--<h2>  <i class="menu-icon fa fa-user"></i>   项目透视</h2>-->

						<div class="stat-icon dib flat-color-4">
							<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search" style="    top: 10px;">
								<div class="input-group">
									<input type="text" id="queryText" class="form-control" placeholder="Search for Project Name">
									<span class="input-group-btn">
		                      		<button class="btn btn-default" id="queryTask" type="button">Go!</button>
		                    </span>
								</div>
							</div>
							<!--<ul class="nav navbar-right panel_toolbox">
             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
             <li><a class="close-link"><i class="fa fa-close"></i></a> </li>
           </ul>-->
							<div class="clearfix" style="background: white;"></div>
						</div>
					</div>


					<div class="x_panel">

						<div class="x_content">
							<div class="title_left">
								<!--<h3><small>Simple table with project listing with progress and editing options</small></h3>-->
							</div>
							<!--<p>Simple table with project listing with progress and editing options</p>-->

							<!-- start project list -->
							<table id="tables" class="table table-striped projects" >
								<thead>
								<tr>
									<th style="width: 1%">#</th>
									<th style="width: 5%">任务编号</th>
									<th style="width: 15%">标题</th>
									<th style="width: 12%">状态</th>
									<th style="width: 10%">发布者</th>
									<th style="width: 12%">截止时间</th>
									<th style="width: 10%">任务类型</th>
								</tr>
								</thead>
								<tbody id="tbodys" style="color: #536A7F;">
								<!--<tr>-->
									<!--<td>7</td>-->
									<!--<td>-->
										<!--<span style="background-color:rgba(34,215,187,.1);color: #22d7bb;padding: 5px;">9</span>-->
									<!--</td>-->
									<!--<td>-->
										<!--dawd-->
									<!--</td>-->
									<!--<td class="project_progress">-->

										<!--<div class="col-md-12 ">-->
			                           	<!--<span class="success">-->
																				<!--<i class="menu-icon fa fa-check-circle" style="color: #00c292;"></i>-->
																	<!--已完成</span>-->

										<!--</div>-->
									<!--</td>-->
									<!--<td>-->
										<!--<img src="../images/admin.jpg" class="avatar" alt="Avatar">-->
									<!--</td>-->
									<!--<td>-->

									<!--</td>-->
									<!--<td>-->
										<!--<div class="col-md-12 cs" style="color: black; padding-top: 1rem;">-->
											<!--<i class="menu-icon fa fa-check-square" style="color: #00c292;"></i>-->
											<!--敏捷任务</div>-->
									<!--</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>7</td>-->
									<!--<td>-->
										<!--<span style="background-color:rgba(34,215,187,.1);color: #22d7bb;padding: 5px;">9</span>-->
									<!--</td>-->
									<!--<td>-->
										<!--dawd-->
									<!--</td>-->
									<!--<td class="project_progress">-->

										<!--<div class="col-md-12 ">-->
			                           	<!--<span class="success">-->
																				<!--<i class="menu-icon fa fa-check-circle" style="color: #00c292;"></i>-->
																	<!--已完成</span>-->
										<!--</div>-->
									<!--</td>-->
									<!--<td>-->
										<!--<img src="../images/admin.jpg" class="avatar" alt="Avatar">-->
									<!--</td>-->
									<!--<td>-->

									<!--</td>-->
									<!--<td>-->
										<!--<div class="col-md-12 cs" style="color: black; padding-top: 1rem;">-->
											<!--<i class="menu-icon fa fa-check-square" style="color: #00c292;"></i>-->
											<!--敏捷任务</div>-->
									<!--</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>7</td>-->
									<!--<td>-->
										<!--<span style="background-color:rgba(34,215,187,.1);color: #22d7bb;padding: 5px;">9</span>-->
									<!--</td>-->
									<!--<td>-->
										<!--dawd-->
									<!--</td>-->
									<!--<td class="project_progress">-->

										<!--<div class="col-md-12 ">-->
			                           	<!--<span class="success">-->
																				<!--<i class="menu-icon fa fa-check-circle" style="color: #00c292;"></i>-->
																	<!--已完成</span>-->
										<!--</div>-->
									<!--</td>-->
									<!--<td>-->
										<!--<img src="../images/admin.jpg" class="avatar" alt="Avatar">-->
									<!--</td>-->
									<!--<td>-->

									<!--</td>-->
									<!--<td>-->
										<!--<div class="col-md-12 cs" style="color: black; padding-top: 1rem;">-->
											<!--<i class="menu-icon fa fa-check-square" style="color: #00c292;"></i>-->
											<!--敏捷任务</div>-->
									<!--</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>7</td>-->
									<!--<td>-->
										<!--<span style="background-color:rgba(34,215,187,.1);color: #22d7bb;padding: 5px;">9</span>-->
									<!--</td>-->
									<!--<td>-->
										<!--dawd-->
									<!--</td>-->
									<!--<td class="project_progress">-->

										<!--<div class="col-md-12 ">-->
			                           	<!--<span class="success">-->
																				<!--<i class="menu-icon fa fa-check-circle" style="color: #00c292;"></i>-->
																	<!--已完成</span>-->
										<!--</div>-->
									<!--</td>-->
									<!--<td>-->
										<!--<img src="../images/admin.jpg" class="avatar" alt="Avatar">-->
									<!--</td>-->
									<!--<td>-->

									<!--</td>-->
									<!--<td>-->
										<!--<div class="col-md-12 cs" style="color: black; padding-top: 1rem;">-->
											<!--<i class="menu-icon fa fa-check-square" style="color: #00c292;"></i>-->
											<!--敏捷任务</div>-->
									<!--</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>7</td>-->
									<!--<td>-->
										<!--<span style="background-color:rgba(34,215,187,.1);color: #22d7bb;padding: 5px;">9</span>-->
									<!--</td>-->
									<!--<td>-->
										<!--dawd-->
									<!--</td>-->
									<!--<td class="project_progress">-->

										<!--<div class="col-md-12 ">-->
			                           	<!--<span class="success">-->
																				<!--<i class="menu-icon fa fa-check-circle" style="color: #00c292;"></i>-->
																	<!--已完成</span>-->
										<!--</div>-->
									<!--</td>-->
									<!--<td>-->
										<!--<img src="../images/admin.jpg" class="avatar" alt="Avatar">-->
									<!--</td>-->
									<!--<td>-->

									<!--</td>-->
									<!--<td>-->
										<!--<div class="col-md-12 cs" style="color: black; padding-top: 1rem;">-->
											<!--<i class="menu-icon fa fa-check-square" style="color: #00c292;"></i>-->
											<!--敏捷任务</div>-->
									<!--</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>7</td>-->
									<!--<td>-->
										<!--<span style="background-color:rgba(34,215,187,.1);color: #22d7bb;padding: 5px;">9</span>-->
									<!--</td>-->
									<!--<td>-->
										<!--dawd-->
									<!--</td>-->
									<!--<td class="project_progress">-->

										<!--<div class="col-md-12 ">-->
			                           	<!--<span class="success">-->
																				<!--<i class="menu-icon fa fa-check-circle" style="color: #00c292;"></i>-->
																	<!--已完成</span>-->
										<!--</div>-->
									<!--</td>-->
									<!--<td>-->
										<!--<img src="../images/admin.jpg" class="avatar" alt="Avatar">-->
									<!--</td>-->
									<!--<td>-->

									<!--</td>-->
									<!--<td>-->
										<!--<div class="col-md-12 cs" style="color: black; padding-top: 1rem;">-->
											<!--<i class="menu-icon fa fa-check-square" style="color: #00c292;"></i>-->
											<!--敏捷任务</div>-->
									<!--</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>7</td>-->
									<!--<td>-->
										<!--<span style="background-color:rgba(34,215,187,.1);color: #22d7bb;padding: 5px;">9</span>-->
									<!--</td>-->
									<!--<td>-->
										<!--dawd-->
									<!--</td>-->
									<!--<td class="project_progress">-->

										<!--<div class="col-md-12 ">-->
			                           	<!--<span class="success">-->
																				<!--<i class="menu-icon fa fa-check-circle" style="color: #00c292;"></i>-->
																	<!--已完成</span>-->
										<!--</div>-->
									<!--</td>-->
									<!--<td>-->
										<!--<img src="../images/admin.jpg" class="avatar" alt="Avatar">-->
									<!--</td>-->
									<!--<td>-->

									<!--</td>-->
									<!--<td>-->
										<!--<div class="col-md-12 cs" style="color: black; padding-top: 1rem;">-->
											<!--<i class="menu-icon fa fa-check-square" style="color: #00c292;"></i>-->
											<!--敏捷任务</div>-->
									<!--</td>-->
								<!--</tr>-->

								<!--<tr>-->
									<!--<td>7</td>-->
									<!--<td>-->
										<!--<span style="background-color:rgba(34,215,187,.1);color: #22d7bb;padding: 5px;">9</span>-->
									<!--</td>-->
									<!--<td>-->
										<!--dawd-->
									<!--</td>-->
									<!--<td class="project_progress">-->

										<!--<div class="col-md-12 ">-->
			                           	<!--<span class="success">-->
																				<!--<i class="menu-icon fa fa-check-circle" style="color: #00c292;"></i>-->
																	<!--已完成</span>-->
										<!--</div>-->
									<!--</td>-->
									<!--<td>-->
										<!--<img src="../images/admin.jpg" class="avatar" alt="Avatar">-->
									<!--</td>-->
									<!--<td>-->

									<!--</td>-->
									<!--<td>-->
										<!--<div class="col-md-12 cs" style="color: black; padding-top: 1rem;">-->
											<!--<i class="menu-icon fa fa-check-square" style="color: #00c292;"></i>-->
											<!--敏捷任务</div>-->
									<!--</td>-->
								<!--</tr>-->


								</tbody>
							</table>
							<!-- end project list -->

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /page content -->


</div>
<div class="modeladdress modal fade" id="myModal" title="sdds" tabindex="-1" role="dialog">
	<div class="modal-dialog " role="document">
		<div class="modal-content">
			<div class="modal-body">
				<ul class="nav navbar-nav">
					<li class="li">
						<div class="row">
							<div class="col-sm-8" style="padding-left: 0px">
								<div class="stat-icon dib flat-color-1">
									<i class="menu-icon ti-power-off"></i>
								</div>
								<span>未开始</span>
							</div>
							<div class="col-sm-4">
								<i class="menu-icon fa fa-check"></i>
							</div>
						</div>
					</li>
					<li class="li">
						<div class="row">
							<div class="col-sm-8" style="padding-left: 0px">
								<div class="stat-icon dib flat-color-2">
									<i class="menu-icon ti-pie-chart"></i>
								</div>
								<span >进行中</span>
							</div>
							<div class="col-sm-4">
								<i class="menu-icon fa fa-gear"></i>
							</div>
						</div>
					</li>
					<li class="li">
						<div class="row">
							<div class="col-sm-8" style="padding-left: 0px">
								<div class="stat-icon dib flat-color-3">
									<i class="menu-icon  fa fa-check-circle"></i>
								</div>
								<span >已完成</span>
							</div>
							<div class="col-sm-4">
								<i class="menu-icon  fa fa-gear"></i>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<!-- jQuery -->
<script src="/resa/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/resa/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="/resa/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="/resa/vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-progressbar -->
<script src="/resa/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<script src="/resa/js/jquery.contextMenu.min.js"></script>

<!-- Custom Theme Scripts -->
<script src="/resa/build/js/custom.min.js"></script>
<!-- PNotify -->
<script src="/resa/vendors/pnotify/dist/pnotify.js"></script>
<script src="/resa/vendors/pnotify/dist/pnotify.buttons.js"></script>
<script src="/resa/vendors/pnotify/dist/pnotify.nonblock.js"></script>

<script>
	$(function(){

		$("#queryTask").click(function(){
			console.log($("#queryText").val())
			var data={"taskName":$("#queryText").val()}
			if($("#queryText").val()=='' || $("#queryText").val()=="" || $("#queryText").val()==null){
				queryTaskInfo(null);
			}
			queryTaskInfo(data);
		})




		//
		// rightMenu();
		queryTaskInfo(null);
	});

	function queryTaskInfo(data){
		$("#tbodys").html("")
		$.ajax({
			url:'/resa/task/successTask.do',
			type:'post',
			data:data,
			dataType:'json',
			success:function(result){
				console.log(result)
				var content="";
				$(result).each(function(i,m) {
					content += '<tr title="右击进行操作"><td>' + m.tId + '</td>' +
							'<td>' +
							'<span style="background-color:rgba(34,215,187,.1);color: #22d7bb;padding: 5px;">' + m.tNumber + '</span>' +
							'</td>' +
							'<td>' + m.title + '' +
							'</td>' +
							'<td class="project_progress">' +
							'<div class="col-md-12 ">' + m.icon + '</div>' +
							'</td>' +
							'<td>' +
							'<img src="'+m.url + m.fFilePath + '" class="avatar" alt="Avatar">' +
							'</td>' +
							'<td> ' + m.endtime + '' +
							'</td>' +
							'<td>' +
							'<div class="col-md-12 cs" style="color: black; padding-top: 1rem;">'+m.typeIcon+m.tName+'' +
							'</div></td></tr>'
				});
				$("#tbodys").append(content)
				//鼠标右击事件
				rightMenu();
				taskinfo();
			},
			error:function(){
				alert("请求失败")
			}
		})
	}

	function taskinfo(){
		$($("#tbodys").find('tr')).each(function(){
			$(this).click(function(){
				$(window.top)[0].show(($($(this).find("td")[0]).text()))
			})
		})
	}


	function rightMenu(){
		var taskinfo;
		var eles;
		$("#tables tbody tr").contextMenu({
			width: 110, // width
			itemHeight: 30, // 菜单项height
			bgColor: "#333", // 背景颜色
			color: "#fff", // 字体颜色
			fontSize: 12, // 字体大小
			hoverBgColor: "#99CC66", // hover背景颜色
			target: function(ele) { // 当前元素
				console.log($(ele));
				eles=ele
				taskinfo=$($(ele).find('td')[0]).text();
			},
			menu: [{
				text: "未开始",
				icon: "/resa/img/add.png",
				callback: function() {
					updateStatus(eles,taskinfo,1)

				}
			},
				{
					text: "进行中",
					icon: "/resa/img/add.png",
					callback: function() {
						updateStatus(eles,taskinfo,2)
					}
				}

			]
		});
	}

	function updateStatus(eles,tid,statusId){
		$.ajax({
			url: '/resa/task/updataTaskStatus.do',
			data: {"tid": tid, "sid": statusId},
			dataType: "JSON",
			type: "POST",
			success: function (result) {
				if (result.code == 200) {
					new PNotify({
						title: "修改任务状态",
						text: "修改成功",
						type:"success",
						styling: 'bootstrap3'
					});
					$(eles).remove()
				}else{
					new PNotify({
						title: "修改任务状态",
						text: "修改失败",
						type:"error",
						styling: 'bootstrap3'
					});
				}
			}
		});
	}



	</script>
</body>
</html>